<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 筛选和新增区域 -->
        <el-form inline :model="form">
             <el-row type="flex" justify="space-between">
               <el-col>
                 <el-form-item label="学科名称">
                    <el-input v-model="form.subjectName"></el-input>
                 </el-form-item>
                 <el-form-item>
                   <el-button size="small" @click="clear">清除</el-button>
                 </el-form-item>
                 <el-form-item>
                    <el-button size="small" type="primary" @click="search" >搜索</el-button>
                 </el-form-item>
               </el-col>
               <el-col>
                 <el-row type="flex" justify="end">
                   <el-form-item>
                    <el-button size="small" type="success" @click="showdialog=true"><i class="el-icon-edit"></i>新增学科</el-button>
                 </el-form-item>
                 </el-row>
               </el-col>
             </el-row>
        </el-form>
        <!-- 信息提示 -->
        <el-alert :title= title type="info" show-icon :closable="false"></el-alert>
        <!-- 表格区域 -->
        <el-table :data="list" style="width: 100%;margin:15px 0">
          <el-table-column type="index" label="序号" width="48"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="140"></el-table-column>
          <el-table-column prop="creatorID" label="创建者" width="140" :formatter="getUserName"></el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="160">
            <template v-slot="{row}">
              {{row.addDate|formatDate("yyyy-MM-dd hh:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示" width="130" :formatter="formatisFrontDisplay"></el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" width="130"></el-table-column>
          <el-table-column prop="tags" label="标签" width="140"></el-table-column>
          <el-table-column prop="totals" label="题目数量" width="140"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="text" @click="$router.push({path:'/subjects/directorys',query:{id:row.id,name:row.subjectName}})">学科分类</el-button>
              <el-button type="text" @click="$router.push({path:'/subjects/tags',query:{id:row.id,name:row.subjectName}})">学科标签</el-button>
              <el-button type="text" @click="editSubject(row.id)">修改</el-button>
              <el-button type="text" @click="delSubject(row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页符 -->
        <el-row type="flex" justify="end">
          <el-pagination background @size-change="changeSize" @current-change="changePage" :current-page="q.page" :page-sizes="[5, 10, 20, 50]" :page-size="q.pagesize" layout="prev, pager, next,sizes,jumper"  :total="q.counts"/>
        </el-row>
        <diaLog ref="diaLog" @update="getList" :showdialog.sync="showdialog"/>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import { simple } from '@/api/base/users'
import diaLog from '../components/subjects-add'
export default {
  data () {
    return {
      form: { // 搜索表单
        subjectName: ''
      },
      q: {
        page: 1, // 页码
        pagesize: 10, // 每页显示数量
        counts: 0 // 总数
      },
      list: [], // 学科列表数据
      userList: [], // 用户简单列表
      showdialog: false // 控制新增和修改弹窗
    }
  },
  computed: {
    title () {
      return '数据一共' + this.q.counts + '条'
    }
  },
  components: {
    diaLog
  },
  created () {
    this.getList()
    this.simple()
  },
  methods: {
    // 清除搜索
    clear () {
      this.form.subjectName = ''
      this.getList()
    },
    // 搜索
    async search () {
      const { data } = await list({ ...this.q, ...this.form })
      this.list = data.items
      this.q.counts = data.counts
    },
    // 获取学科列表
    async getList () {
      const { data } = await list(this.q)
      this.list = data.items
      this.q.counts = data.counts
    },
    // 格式化创建者
    getUserName (row, column, cellValue, index) {
      const obj = this.userList.find(item => +item.id === +cellValue) // find寻找对应的数据并导出
      return obj ? obj.username : '未知'
    },
    // 获取简单用户列表
    async simple () {
      const { data } = await simple()
      this.userList = data
    },
    // 格式化前台是否显示
    formatisFrontDisplay (row, column, cellValue, index) {
      return +cellValue === 1 ? '是' : '否'
    },
    // 切换每页显示条数
    changeSize (size) {
      this.q.pagesize = size
      this.q.page = 1
      this.getList()
    },
    // 切换页码
    changePage (page) {
      this.q.page = page
      this.getList()
    },
    // 删除学科
    async delSubject (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 修改学科前渲染
    async editSubject (id) {
      await this.$refs.diaLog.getDetail(id)
      this.showdialog = true
    }
  }
}
</script>

<style scoped>
.el-icon-edit {
  margin-right: 3px;
}
</style>
